<section class="page">
	<header class="page-header">
		<img src="images/1.png" alt="">
	</header>
	<div class="page-body">
		<div class="container">
			<div class="product-detail">
				<div class="row">
					<div class="col-xs-12 col-sm-6">
						<div id="product-detail-cover" class="carousel slide" data-ride="carousel">
						    <ol class="carousel-indicators">
						        <li data-target="#product-detail-cover" data-slide-to="0" class=""></li>
						        <li data-target="#product-detail-cover" data-slide-to="1" class=""></li>
						        <li data-target="#product-detail-cover" data-slide-to="2" class="active"></li>
						    </ol>
						    <div class="carousel-inner">
								<div class="item">
									<a href="images/2.png" class="zoom_img"><img src="images/2.png" alt=""></a>
								</div>
								<div class="item">
									<a href="images/2.png" class="zoom_img"><img src="images/2.png" alt=""></a>
								</div>
								<div class="item active">
									<a href="images/2.png" class="zoom_img"><img src="images/2.png" alt=""></a>
								</div>
						    </div>
						    <a class="left carousel-control" href="#product-detail-cover" data-slide="prev"><span class="fa fa-angle-left"></span></a>
						    <a class="right carousel-control" href="#product-detail-cover" data-slide="next"><span class="fa fa-angle-right"></span></a>
						</div>
						<link href="css/colorbox.css" rel="stylesheet">
						<script src="js/jquery.colorbox.js"></script>
						<script type="text/javascript">
						    $(document).ready(function(){
						        $(".zoom_img").colorbox({rel:'zoom_img'});
						    });
					    </script>
					</div>
					<div class="col-xs-12 col-sm-6">
						<div class="caption">
							<h4 class="title">Tên món</h4>
							<div class="price"><span>Giá: 30.000 Đ</span></div>
							<div class="detail">
								<p><b>Giới thiệu chi tiết về sản phẩm</b></p>
								<p><b>Nội dung thay đổi khi quản trị</b></p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui nihil, eius deleniti porro officiis, numquam reprehenderit sed, eaque corrupti doloremque obcaecati asperiores dicta quaerat, nam soluta laborum incidunt iure dolor!</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui nihil, eius deleniti porro officiis, numquam reprehenderit sed, eaque corrupti doloremque obcaecati asperiores dicta quaerat, nam soluta laborum incidunt iure dolor!</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui nihil, eius deleniti porro officiis, numquam reprehenderit sed, eaque corrupti doloremque obcaecati asperiores dicta quaerat, nam soluta laborum incidunt iure dolor!</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui nihil, eius deleniti porro officiis, numquam reprehenderit sed, eaque corrupti doloremque obcaecati asperiores dicta quaerat, nam soluta laborum incidunt iure dolor!</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<header class="content-header">
					<h4>Sản phẩm cùng loại</h4>
				</header>
				<div class="content-body">
					<div class="product-list product-relate">
						<div class="row">
							<?php
							for ($i=0; $i < 6; $i++) { 
							?>
								<div class="col-xs-4 col-sm-2">
									<div class="thumb-item-2">
										<div class="cover">
											<img src="images/2.png" alt="">
										</div>
										<div class="caption">
											<h5 class="title">Tên món</h5>
											<div class="price"><span>30.000 Đ</span></div>
											<a href="?page=chi-tiet-san-pham" class="view-detail-bg">Chi tiết</a>
										</div>
									</div>
								</div>
							<?php
							}
							?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>